<!--
 * @Descripttion: 类型筛选
 * @LastEditors: xzh
 * @LastEditTime: 2023-08-29 20:10:12
-->
<template>
  <FilterBtn :toolBtnItem="filterToolItem" @filterSearch="handleFilterSearch">
    <template #default>
      <el-input
        v-model="toolsParam.keyWord"
        clearable
        :placeholder="$t('common.enter') + $t('common.keyword')"
        @change="handleFilterSearch(false)"
        @clear="handleToolClick"
      />
    </template>
  </FilterBtn>
</template>

<script setup lang="ts">
import { ref, reactive, inject, computed } from "vue";
import { Search } from "@element-plus/icons-vue";
import type { object_Inf } from "@/utils/typings/index.type";
import FilterBtn from "../../tools-filterBtn/index.vue";

/**
 * @Author: xzh
 * @Descripttion:工具栏参数
 * @Param:
 */
let toolsParam = reactive<object_Inf>(inject("toolsParam") || {});

const props = defineProps({
  //按钮数据源
  toolBtnItem: {
    type: Object,
    requited: {},
    default: true,
  },
});

/**
 * @Author: xzh
 * @Descripttion: 格式化按钮
 * @Param:
 * @param {*} computed
 */
let filterToolItem = computed(() => {
  let { toolBtnItem } = props;
  return {
    ...toolBtnItem,
    icon: toolBtnItem.icon || Search,
  };
});

/**
 * @Author: xzh
 * @Descripttion:筛选搜索
 * @Param:
 */
let handleFilterSearch = (isDetail: boolean) => {
  // 关键字有值 && 显示详情 && 回调按钮点击事件
  !isDetail && handleToolClick();
};
/**
 * @Author: xzh
 * @Descripttion:回调按钮点击事件
 * @Param:
 */
let handleToolClick = () => {
  let { toolBtnClick = () => {} } = toolsParam,
    { toolBtnItem } = props;
  toolBtnClick({
    code: toolBtnItem.code,
    item: toolBtnItem,
  });
};
</script>
<style lang="scss" scoped></style>
